<script setup>
import {ref} from "vue";
import {User,Management,Promotion,Files,CaretBottom,UserFilled,Lock} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {loginReq} from "@/api/user.js";
import router from "@/router/router.js";
import {userTokenStore} from "@/stores/token.js";
//登录表单
const loginFrom=ref({
  username:'',
  password:''
})

const userToken=userTokenStore()

//登录动作
const loginAction = async ()=>{
  loginReq(loginFrom.value).then((resp)=> {
    //存储token
    //3.存储token
    /**
     * Pinia状态管理库
     * 被pinia 管理的状态 允许跨软件 跨页面 共享页面
     *
     */
    userToken.setToken(resp.data)
    ElMessage.success(resp.message)
    //4.跳转首页 支持名称和路径两种方式
    router.push('/')
  })
}
</script>

<template>

    <el-row class="login-page">
        <el-col :span="12" class="left-side">
                <el-col :span="12" class="introduction-side">
                    <h1 >正版小说网</h1>
                    <h2>Authentic Novel Website</h2>
                    <h3>你想看的小说都在这里</h3>
                </el-col>

        </el-col>
        <el-col :span="12" class="right-side">
          <!--      登录表单-->
          <el-col :span="12" class="login-side">
          <el-form :model="loginFrom" >
            <el-form-item class="login-title">
             <h1>登录</h1>
            </el-form-item>
            <el-form-item prop="username">
              <el-input class="login-input" v-model="loginFrom.username" :prefix-icon="User" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input class="login-input" v-model="loginFrom.password"  type="password" :prefix-icon="Lock" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="login-button" @click="loginAction" type="primary" auto-insert-space>登录</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        </el-col>
    </el-row>

</template>

<style scoped>

.login-page{
  border: 1px solid gainsboro;
  box-shadow: 0px 0px 20px 20px white;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url("https://zzw-handsome.oss-cn-beijing.aliyuncs.com/857a5be0-a33a-4002-8492-4a5fc5232549.png");
  background-size: cover;
}
.introduction-side{
  margin: 50px 40px;
  color: white;
}
.left-side{

}

.login-side{
  margin: 50px auto;
}
.login-input{
  height: 45px;
}
.login-button{
  width: 400px;
}
</style>